<template>
  <div>
    <el-dialog width="400px" title="收货地址" :visible.sync="formInline.show">
      <el-form
        :model="editData"
        label-position="top"
        :rules="rules"
        ref="editRef"
      >
        <el-form-item
          label="编辑地址"
          :label-width="formLabelWidth"
          prop="area"
        >
          <select class="location location_p" name="location_p"></select>
          <select class="location location_c" name="location_c"></select>
          <select class="location location_a" name="location_a"></select>
        </el-form-item>
        <el-form-item
          label="详细地址"
          :label-width="formLabelWidth"
          prop="particularAddress"
        >
          <el-input
            type="textarea"
            v-model="editData.particularAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="编辑手机号"
          :label-width="formLabelWidth"
          prop="phone"
        >
          <el-input v-model="editData.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formInline.show = false">取 消</el-button>
        <el-button type="success" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { PCAS } from './region-select'
export default {
  props: ['formInline', 'editData'],
  data() {
    return {
      isPCAS: null,
      rules: {
        area: [
          {
            required: true,
            message: '请选择地区',
            trigger: 'change'
          }
        ],
        particularAddress: [
          {
            required: true,
            message: '请填写详细地址',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请填写手机号',
            trigger: 'blur'
          },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ]
      },
      formLabelWidth: '120px'
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRegionInfo(this.editData.area)
    })
  },
  methods: {
    complete() {
      this.$emit('complete', false)
    },
    initRegionInfo(address) {
      if (this.validateEmpty(address)) {
        this.isPCAS = new PCAS(
          'location_p',
          'location_c',
          'location_a',
          '',
          '',
          ''
        )
      } else {
        // 分割字符串
        this.isPCAS = new PCAS(
          'location_p',
          'location_c',
          'location_a',
          address[0],
          address[1],
          address[2]
        )
      }
    },
    validateEmpty(val) {
      if (val instanceof Array) {
        if (val.length === 0) return true
      } else if (val instanceof Object) {
        if (JSON.stringify(val) === '{}') return true
      } else {
        if (
          val === 'null' ||
          val == null ||
          val === 'undefined' ||
          val === undefined ||
          val === ''
        )
          return true
        return false
      }
      return false
    },
    submit() {
      const province = document.getElementsByName('location_p')[0].value
      const city = document.getElementsByName('location_c')[0].value
      const district = document.getElementsByName('location_a')[0].value
      const phone = this.editData.phone
      const particularAddress = this.editData.particularAddress
      this.$refs['editRef'].validate((valid) => {
        if (valid) {
          this.$emit('compile', {
            area: [province, city, district],
            phone,
            particularAddress
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.location {
  border: none;
  background: #f7f7f7;
  height: 36px;
  width: 100px;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 6px 12px;
  margin-right: 16px;
}
</style>
